<template>
  <div class="contact">
    <div class="header">
     <topnav style="padding-top:60px;"></topnav>
      <div class="title">互联网让我们如此亲近</div>
    </div>
    <div class="phone_shengxianbj">
      <phonenav :backcolor="backcolor" :type="type"></phonenav>
    </div>
    <!-- <div class="phone_shengxianbj">
      <div class="body">
        <img src="../assets/image/seafood/logo.png" alt="大智" />
        <el-dropdown class="phone_nav">
          <span class="el-dropdown-link">
            <div>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in nav" :key="index">{{
              item.title
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div> -->
    <div class="contact_us">
      <div class="body">
        <div class="contact_left">
          <h2>联系我们</h2>
          <h3>上海观智网络科技有限公司</h3>
          <p>上海枭嵘信息科技有限公司(总部)</p>
          <p>电话 :134-8274-2882</p>
          <p>QQ：1059681242</p>
          <p>邮箱：haoljq@163.com</p>
          <p>地址：上海闵行区七宝国际智慧园区96号302</p>
        </div>
        <div class="contact_right">
          <img src="../assets/image/contact/aoweima.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="Cooperation_from">
      <div class="body">
        <h3>合作意向</h3>
        <div class="from_info">
          <ul class="input">
            <li>
              <span class="span">公司名称：</span>
              <input type="text" class="compoty_name" />
            </li>
            <li>
              <div class="uname">
                <span class="span">姓名：</span>
                <input type="text" class="compoty_name" />
              </div>
              <div class="phone">
                <span class="span">电话：</span>
                <input type="text" class="compoty_name" />
              </div>
            </li>
          </ul>
          <ul class="project">
            <li v-for="(item, index) in probject" :key="index">
              <label>
                <input type="checkbox" :value="item" name="box" />
                <span>{{ item }}</span>
              </label>
            </li>
          </ul>
          <div class="sub">
            <ul class="verification">
              <li>
                <span>验证码：</span>
                <input
                  type="text"
                  maxlength="4"
                  id="txt_code"
                  name="txt_code"
                />
              </li>
              <img
                src="../assets/image/contact/VerifyCode.jpg"
                class="verification_img"
                alt="看不清？点击更换"
              />
            </ul>
            <p>
              <a href="javascript:void(0)">
                <input type="submit" value="提交需求" class="submit_button" />
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <last></last>
    <location></location>
  </div>
</template>
<script>
import last from "../components/Last.vue";
import location from "../components/Location.vue";
import topnav from "../components/Topnav.vue";
import phonenav from "@/components/Phone_nav.vue";
export default {
  name: "Contact",
  data() {
    return {
      logo: require("../assets/image/contact/logo.png"),
      backcolor:"contact/bounnt2.jpg",
      type:'image',
      nav: [
        { title: "首页" },
        { title: "关于我们" },
        { title: "商城小程序" },
        { title: "生鲜小程序" },
        { title: "案例展示" },
        { title: "服务项目" },
        { title: "联系我们" },
      ],
      probject: [
        "建设小程序",
        "做网站",
        "建设微信公众号",
        "开发APP",
        "网站改版",
        "技术外包支持",
      ],
    };
  },
  components: {
    last,
    location,
    topnav,
    phonenav
  },
};
</script>
<style scoped lang="less">
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 1000px) and (max-width: 5000px) {
  .phone_shengxianbj {
    display: none;
  }
  .header {
    margin-top: -31px;
    height: 829px;
    background: url("../assets/image/contact/bounnt2.jpg") no-repeat center
      center;
    overflow: hidden;
    .header_top {
      width: 100%;
      height: 140px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      padding: 17px 0 0;
      .header_top_left {
        width: 30%;
      }
      .header_top_left img {
        width: 100%;
      }
      .header_top_right {
        width: 70%;
        display: flex;
        justify-content: flex-end;
        padding: 0 30px 0 0;
        a {
          padding: 0 10px;
          color: white;
          text-decoration: none;
        }
      }
      .header_con {
        height: 200px;
        margin-top: 50px;
        p {
          width: 100%;
          color: white;
          font-size: 24px;
          height: 80px;
          line-height: 80px;
        }
      }
    }
    .title {
      margin: 150px 0 0;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      color: #fff;
    }
  }
  .contact_us {
    width: 100%;
    background: #e1e1e1;
    height: 450px;
    margin: 24px 0 0;
    overflow: hidden;
    .body {
      width: 80%;
      margin: 0 auto;
      height: auto;
      display: flex;
      justify-content: space-between;
      .contact_left {
        padding-top: 55px;
        padding-left: 10px;
        h2 {
          color: #494848;
          font-size: 28px;
        }
        h3 {
          font-size: 28px;
          color: #144bae;
          padding-top: 25px;
          line-height: 60px;
        }
        p {
          color: #666666;
          line-height: 40px;
          font-size: 20px;
          width: 100%;
        }
      }
      .contact_right {
        padding-top: 75px;
        padding-right: 30px;
      }
    }
  }
  .Cooperation_from {
    width: 100%;
    height: 500px;
    overflow: hidden;
    .body {
      width: 80%;
      margin: 0 auto;
      h3 {
        padding: 30px 0;
        font-size: 30px;
        color: #494848;
      }
      .from_info {
        width: 600px;
        .input {
          //公共input标题
          .span {
            height: 30px;
            line-height: 31px;
            padding-left: 10px;
            font-size: 18px;
            color: #666666;
            font-style: normal;
            display: block;
          }
          //公共input输入框
          .compoty_name {
            width: 68%;
            line-height: 30px;
            height: 30px;
            border: none;
            font-size: 18px;
            color: #666666;
            outline: none;
            background: #fff;
            border: none;
            padding: 0;
          }
          li:first-child {
            border: #cbcbcb 1px solid;
            padding: 10px;
            height: auto;
            height: 30px;
            display: flex;
            align-items: center;
          }
          li:last-child {
            margin: 20px 0 0;
            overflow: hidden;
            display: flex;
            height: auto;
            justify-content: space-between;
            div {
              border: #cbcbcb 1px solid;
              padding: 10px;
              display: flex;
              align-items: center;
            }
            div:first-child {
              width: 40%;
            }
            div:last-child {
              width: 50%;
            }
          }
        }
        .project {
          width: 600px;
          height: auto;
          padding: 20px 0 0;
          display: flex;
          flex-wrap: wrap;
          li {
            font-size: 18px;
            color: #666666;
            width: 33.3%;
            margin-top: 10px;
            label {
              cursor: pointer;
            }
            input {
              width: 20px;
              height: 20px;
              background: #fff 1px scroll;
              float: left;
              margin-right: 5px;
              margin-top: 5px;
            }
            span {
              line-height: 30px;
              float: left;
            }
          }
        }
        .sub {
          margin: 30px 0 0;
          height: auto;
          display: flex;
          justify-content: space-between;
          .verification {
            width: 340px;
            li {
              width: 60%;
              border: #cbcbcb 1px solid;
              padding: 10px;
              float: left;
              span {
                float: left;
                width: 37%;
                line-height: 30px;
                padding-left: 10px;
                font-size: 18px;
                color: #666666;
              }
              input {
                width: 50%;
                line-height: 30px;
                border: none;
                font-size: 18px;
                color: #666666;
                float: left;
                outline: none;
                border: 0;
              }
            }
            .verification_img {
              width: 94px;
              height: 50px;
              padding-left: 10px;
              padding-top: 0px;
            }
          }
          .submit_button {
            font-size: 18px;
            color: #fff;
            width: 260px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            background: #144bae;
            border: none;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .phone_shengxianbj{
    display: block;
  }
  .header {
    display: none;
  }
  .contact_us {
    width: 100%;
    background: #e1e1e1;
    height: auto;
    overflow: hidden;
    padding: 20px 0;
    .body {
      width: 95%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      .contact_left {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        text-align: center;
        width: 100%;
        padding: 0 0 20px;
        h2 {
          color: #494848;
          font-size: 28px;
          text-align: center;
          padding: 12px 0;
        }
        h3 {
          font-size: 28px;
          color: #144bae;
          text-align: center;
          padding: 0 0 12px;
        }
        p {
          color: #666666;
          line-height: 40px;
          font-size: 20px;
        }
      }
      .contact_right {
        width: 31.5%;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
    }
  }
  .Cooperation_from {
    width: 100%;
    height: auto;
    overflow: hidden;
    .body {
      width: 95%;
      margin: 0 auto;
      h3 {
        padding: 30px 0;
        font-size: 26px;
        color: #494848;
        text-align: center;
      }
      .from_info {
        width: 100%;
        .input {
          //公共input标题
          .span {
            height: 23px;
            line-height: 26px;
            font-size: 15px;
            color: #666666;
            font-style: normal;
            display: block;
          }
          //公共input输入框
          .compoty_name {
            width: 60%;
            line-height: 23px;
            height: 23px;
            border: none;
            font-size: 15px;
            color: #666666;
            outline: none;
            background: #fff;
            border: none;
            padding: 0;
          }
          li:first-child {
            border: #cbcbcb 1px solid;
            padding: 10px;
            height: 23px;
            display: flex;
            align-items: center;
          }
          li:last-child {
            margin: 20px 0 0;
            overflow: hidden;
            display: flex;
            height: auto;
            flex-direction: column;
            div {
              border: #cbcbcb 1px solid;
              padding: 10px;
              display: flex;
              align-items: center;
              margin: 0 0 20px;
            }
          }
        }
        .project {
          width: 95%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
          margin: 0 auto;
          li {
            font-size: 14px;
            color: #666666;
            width: 50%;
            margin-top: 10px;
            label {
              cursor: pointer;
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
            }
            input {
              width: 15px;
              height: 15px;
              background: #fff 1px scroll;
              float: left;
              margin-right: 5px;
              margin-top: 5px;
            }
            span {
              line-height: 30px;
              float: left;
            }
          }
        }
        .sub {
          margin: 30px auto;
          height: auto;
          display: flex;
          flex-direction: column;
          width: 95%;
          .verification {
            width: 100%;
            li {
              width: 55%;
              border: #cbcbcb 1px solid;
              padding: 10px;
              float: left;
              span {
                float: left;
                line-height: 30px;
                font-size: 16px;
                color: #666666;
              }
              input {
                width: 50%;
                line-height: 30px;
                border: none;
                font-size: 18px;
                color: #666666;
                float: left;
                outline: none;
                border: 0;
              }
            }
            .verification_img {
              width: 30%;
              height: 50px;
              padding-left: 10px;
              padding-top: 0px;
            }
          }
          .submit_button {
            font-size: 18px;
            color: #fff;
            width: 100%;
            margin: 20px 0 0;
            text-align: center;
            height: 50px;
            line-height: 50px;
            background: #144bae;
            border: none;
          }
        }
      }
    }
  }
}
</style>